<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<meta charset="UTF-8">
<html>
<head>
  <title>修改研究方向</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f5f1ff;
      color: #4e3d63;
      margin: 0;
      padding: 0;
    }

    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
      color: #7a4e9f;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }

    table th, table td {
      padding: 12px;
      text-align: center;
      border: 1px solid #ddd;
    }

    table th {
      background-color: #d9c8e2;
    }

    button {
      padding: 8px 16px;
      margin: 5px;
      border: none;
      background-color: #7a4e9f;
      color: white;
      cursor: pointer;
      border-radius: 4px;
    }

    button:hover {
      background-color: #9b8fa6;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>修改研究方向</h1>

  <!-- 添加研究方向表单 -->
  <form action="${pageContext.request.contextPath}/researchDirectionOperate" method="POST">
    <label for="secondaryDiscipline">选择二级学科:</label>
    <select id="secondaryDiscipline" name="secondaryDisciplineId" required>
      <option value="">请选择二级学科</option>
      <!-- 动态填充二级学科数据 -->
      <c:forEach var="secondaryDiscipline" items="${sessionScope.secondaryDisciplines}">
        <option value="${secondaryDiscipline.secondaryDisciplineId}">${secondaryDiscipline.name}</option>
      </c:forEach>
    </select>

    <label for="researchId">研究方向ID前缀:</label>
    <input type="text" id="researchId" name="researchId" required readonly />

    <label for="researchName">新增研究方向名称:</label>
    <input type="text" id="researchName" name="researchName" required />

    <label for="customIdSuffix">研究方向ID后缀:</label>
    <input type="text" id="customIdSuffix" name="customIdSuffix" required maxlength="2" />

    <button type="submit" name="action" value="add">添加研究方向</button>
  </form>

  <!-- 遍历二级学科和其研究方向 -->
  <c:forEach var="secondaryDiscipline" items="${sessionScope.secondaryDisciplines}">
    <h2>${secondaryDiscipline.name} - 二级学科</h2>

    <table>
      <thead>
      <tr>
        <th>研究方向ID</th>
        <th>研究方向名称</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <c:forEach var="researchDirection" items="${secondaryDiscipline.researchDirections}">
        <tr>
          <td>${researchDirection.researchId}</td>
          <td>${researchDirection.researchDirection}</td>
          <td>
            <!-- 删除按钮 -->
            <form action="${pageContext.request.contextPath}/researchDirectionOperate" method="post" style="display:inline;">
              <input type="hidden" name="researchId" value="${researchDirection.researchId}" />
              <input type="hidden" name="secondaryDisciplineId" value="${secondaryDiscipline.secondaryDisciplineId}" />
              <button type="submit" name="action" value="delete">删除</button>
            </form>
          </td>
        </tr>
      </c:forEach>
      </tbody>
    </table>
  </c:forEach>
</div>

<script type="text/javascript">
  // 当选择二级学科时，动态更新研究方向ID
  document.getElementById('secondaryDiscipline').addEventListener('change', function() {
    var selectedDisciplineId = this.value;  // 获取选择的二级学科ID
    var researchIdInput = document.getElementById('researchId');

    // 如果选择了二级学科，设置研究方向ID为二级学科ID作为前缀
    if (selectedDisciplineId) {
      researchIdInput.value = selectedDisciplineId;  // 使用二级学科ID作为前缀
    } else {
      // 如果没有选择二级学科，清空研究方向ID
      researchIdInput.value = '';
    }
  });
</script>

</body>
</html>